<template>
	<div class="mainMapContent">
		<Header></Header>
		<div class="sidebarBox">
			<Sidebar :class="{ menuStart: isActive, menuEnd: !isActive }"></Sidebar>
			<div :class="{ cardDatas: true, cardDatasStart: isActive, cardDatasEnd: !isActive }">
				<div class="cardDatasSpeedy">
					<div class="cardDatasSpeedyTitle">快捷操作</div>
					<div class="cardDatasSpeedyContent">
						<div class="cardDatasSpeedyItem">
							<span>快速下发策略</span>
							<wj-Button type="info" @click="quickIssueStrategy">立即进行</wj-Button>
						</div>
						<div class="cardDatasSpeedyItem">
							<span>快速终端准入</span>
							<wj-Button type="info" @click="quickTerminalAdmittance">立即进行</wj-Button>
						</div>
						<div class="cardDatasSpeedyItem">
							<span>快速平台准入</span>
							<wj-Button type="info" @click="quickPlatformAdmittance">立即进行</wj-Button>
						</div>
					</div>
				</div>
				<div class="cardDatasRoll">
					<div class="cardDatasEvery">
						<CardScroll :title="'实时告警'" :list="waringList" :handleLook="waringHandle"></CardScroll>
					</div>
					<div class="cardDatasEvery">
						<CardScroll :title="'派单中'" :list="operationList" :handleLook="operationHandle"></CardScroll>
					</div>
					<div class="cardDatasEvery">
						<CardScroll :title="'终端已离线'" :list="offlineList" :handleLook="offlineHandle"></CardScroll>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import Sidebar from "@/views/common/Sidebar";
import CardScroll from "@/views/common/CardScroll";
import Header from "@/views/common/Header";
export default {
	name: "MainMap",
	components: {
		Sidebar,
		CardScroll,
		Header,
	},
	data() {
		return {
			// 左侧导航
			isActive: false,
			// 实时告警列表
			waringList: [
				{
					iconClass: "wj-icon-gaojing",
					type: "敏感字告警",
					text: "G5京昆高速-001",
				},
				{
					iconClass: "wj-icon-gaojing",
					type: "敏感字告警",
					text: "G5京昆高速-002",
				},
				{
					iconClass: "wj-icon-gaojing",
					type: "敏感字告警",
					text: "G5京昆高速-003",
				},
				{
					iconClass: "wj-icon-gaojing",
					type: "敏感字告警",
					text: "G5京昆高速-004",
				},
				{
					iconClass: "wj-icon-gaojing",
					type: "敏感字告警",
					text: "G5京昆高速-005",
				},
				{
					iconClass: "wj-icon-gaojing",
					type: "敏感字告警",
					text: "G5京昆高速-006",
				},
				{
					iconClass: "wj-icon-gaojing",
					type: "敏感字告警",
					text: "G5京昆高速-007",
				},
				{
					iconClass: "wj-icon-gaojing",
					type: "敏感字告警",
					text: "G5京昆高速-008",
				},
				{
					iconClass: "wj-icon-gaojing",
					type: "敏感字告警",
					text: "G5京昆高速-009",
				},
				{
					iconClass: "wj-icon-gaojing",
					type: "敏感字告警",
					text: "G5京昆高速-0010",
				},
			],
			// 终端运维中列表
			operationList: [
				{
					iconClass: "wj-icon-yunwei",
					type: "运维中",
					text: "G5京昆高速-001",
				},
				{
					iconClass: "wj-icon-yunwei",
					type: "运维中",
					text: "G5京昆高速-002",
				},
				{
					iconClass: "wj-icon-yunwei",
					type: "运维中",
					text: "G5京昆高速-003",
				},
				{
					iconClass: "wj-icon-yunwei",
					type: "运维中",
					text: "G5京昆高速-004",
				},
				{
					iconClass: "wj-icon-yunwei",
					type: "运维中",
					text: "G5京昆高速-005",
				},
			],
			// 终端已离线列表
			offlineList: [
				{
					iconClass: "wj-icon-jiankong",
					type: "已离线",
					text: "G5京昆高速-001",
				},
				{
					iconClass: "wj-icon-jiankong",
					type: "已离线",
					text: "G5京昆高速-002",
				},
				{
					iconClass: "wj-icon-jiankong",
					type: "已离线",
					text: "G5京昆高速-003",
				},
				{
					iconClass: "wj-icon-jiankong",
					type: "已离线",
					text: "G5京昆高速-004",
				},
				{
					iconClass: "wj-icon-jiankong",
					type: "已离线",
					text: "G5京昆高速-005",
				},
			],
		};
	},
	create() {},
	mounted() {
		window.addEventListener("mousemove", (e) => {
			// console.log(e.x)
			// console.log(e.y)
			// console.log(e.offsetX);
			// console.log(e.offsetY);
			if (e.offsetX <= 10 && 0 <= e.offsetY <= 879) {
				this.isActive = true;
				// console.log(this.isActive)
			} else if (e.offsetX >= 359 && 0 <= e.offsetY <= 879) {
				this.isActive = false;
				// console.log(this.isActive)
      }
      // else if (865 <= e.offsetY <= 879 && 0 <= e.offsetX <= 1920) {
			// 	this.isActive = true;
			// 	console.log(this.isActive);
			// } else if (e.offsetY < 595 && 0 <= e.offsetX <= 1920) {
			// 	this.isActive = false;
			// 	console.log(this.isActive);
			// }
		});
	},
	methods: {
		// 实时告警——查看全部
		waringHandle() {
			console.log("实时告警——查看全部");
		},
		// 终端运维中——查看全部
		operationHandle() {
			console.log("终端运维中——查看全部");
		},
		// 终端已离线——查看全部
		offlineHandle() {
			console.log("终端已离线——查看全部");
		},
		// 快速下发策略
		quickIssueStrategy() {
			console.log("快速下发策略");
		},
		// 快速终端准入
		quickTerminalAdmittance() {
			console.log("快速终端准入");
		},
		// 快速平台准入
		quickPlatformAdmittance() {
			console.log("快速平台准入");
		},
	},
};
</script>
<style lang="less" scoped>
.mainMapContent {
	width: 100%;
	height: 100%;
	background-image: url("../assets/sichuanMax.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 62% 85%;
	overflow: hidden;

	.sidebarBox {
		width: 100%;
		height: calc(100% - 68px);
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		.menuStart {
			transform: translateX(0);
			transition: all 1s ease-in-out;
		}
		.menuEnd {
			transform: translateX(-346px);
			transition: all 1s ease-in-out;
		}
		.cardDatas {
			width: 82%;
			height: 284px;
			margin-top: 2px;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			.cardDatasSpeedy {
				width: 18%;
				height: 100%;
				box-sizing: border-box;
				background: #ffffff;
				margin-right: 2px;
				padding: 8px 12px;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				.cardDatasSpeedyTitle {
					width: 100%;
					height: 24px;
					line-height: 1;
					font-size: 18px;
					margin-bottom: 12px;
				}
				.cardDatasSpeedyContent {
					width: 100%;
					height: calc(100% - 24px - 12px);
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					.cardDatasSpeedyItem {
						width: 100%;
						display: flex;
						flex-direction: row;
						justify-content: space-around;
						align-items: center;
						font-size: 16px;
						/deep/ .wj-button-info {
							padding: 8px 12px;
						}
					}
				}
			}
			.cardDatasRoll {
				width: 82%;
				height: 100%;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				.cardDatasEvery {
					width: 33.33%;
					height: 100%;
					margin-right: 2px;
				}
				.cardDatasEvery:last-child {
					margin-right: 0;
				}
			}
		}
		.cardDatasStart {
			transform: translateY(0);
			transition: all 1s ease-in-out;
		}
		.cardDatasEnd {
			transform: translateY(284px);
			transition: all 1s ease-in-out;
		}
	}
}
</style>
